<template>
    <div>
        <nav-header>
            <template v-slot:title>订单</template>
        </nav-header>

        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <p style="font-size: 20px;font-weight: 600;margin: 0;">订单信息</p>
        </div>

        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <div class="container-fluid">
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-xs-6" style="text-align: left">订单编号:</div>
                    <div class="col-xs-6" style="text-align: right">{{orderDetail.order_no}}</div>
                </div>
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-xs-6" style="text-align: left">商品名称:</div>
                    <div class="col-xs-6" style="text-align: right">{{orderDetail.collection_name}}</div>
                </div>
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-xs-6" style="text-align: left">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</div>
                    <div class="col-xs-6" style="text-align: right"><span style="color: rgb(214, 111, 84)">{{orderDetail.order_price}}</span>
                    </div>
                </div>
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-xs-6" style="text-align: left">卖家昵称:</div>
                    <div class="col-xs-6" style="text-align: right">{{orderDetail.agent_name}}</div>
                </div>
                <div class="row" style="padding-bottom: 10px;">
                    <div class="col-xs-6" style="text-align: left">卖家电话:</div>
                    <div class="col-xs-6" style="text-align: right">{{orderDetail.agent_contract}}</div>
                </div>
            </div>
        </div>


        <div style="text-align: center;margin-top: 10px;background-color: #fff;padding: 10px 0;">
            <p v-if="is_close" style="font-size: 20px;font-weight: 400;margin: 0;">{{leave_time_text}}</p>
            <p v-if="!is_close" style="font-size: 20px;font-weight: 400;margin: 0;">支 付 倒 计 时 {{leave_time_text}}</p>
        </div>

        <div @click="toOrderList" style="height: 50px;line-height: 50px;background-color: rgb(214, 111, 84);color: #FAFAFA;text-align: center;font-size: 16px;">返 回 订 单 中 心</div>

        <div v-if="!is_close" >
            <nav-tab :data="navData" @handle="handleTab"></nav-tab>

            <div v-show="navData[0].active" style="text-align: center;background-color: #fff;padding-top: 20px;">
                <img :src="orderDetail.agent_pay_code.ali_code" style="width:80%;" />
            </div>
            <div v-show="navData[1].active" style="text-align: center;background-color: #fff;padding-top: 20px;">
                <img :src="orderDetail.agent_pay_code.wx_code" style="width:80%;" />
            </div>
            <div v-show="navData[2].active">
                <div style="text-align: center;background-color: #fff;height: 100%;line-height: 50px;;padding-top: 20px;">
                    <p>收款姓名:{{orderDetail.agent_pay_code.bankcard.real_name}}</p>
                    <!--            <p>{{orderDetail.agent_pay_code.bankcard.mobile_number}}</p>-->
                    <p>银行卡号:{{orderDetail.agent_pay_code.bankcard.bank_no}}</p>
                    <p>开户银行:{{orderDetail.agent_pay_code.bankcard.bank_name}}</p>
                </div>

            </div>
        </div>

<!--        <div v-show="navData[3].active">4</div>-->

    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";
    import NavTab from "../Widget/NavTab";
    import qr from 'qrcode';

    export default {
        components: {NavTab, NavHeader},
        data() {
            return {
                navData: [
                    // {
                    //     label: '支付宝支付',
                    //     active: true,
                    // },
                    {
                        label: '支付宝二维码',
                        active: true,
                    },
                    {
                        label: '微信二维码',
                        active: false,
                    },
                    {
                        label: '银行卡信息',
                        active: false,
                    },
                ],
                order_no: '',
                orderDetail: {
                    price: '',
                    collection_name: '',
                    order_no: '',
                    agent_name: '',
                    agent_contract: '',
                    status: '',
                    agent_pay_code: {
                        ali_code: '',
                        wx_code: '',
                        bankcard: {
                            real_name: '',
                            mobile_number: '',
                            bank_no: '',
                            bank_name: '',
                        },
                    }
                },
                leave_time: 0,
                leave_time_text: '00:00:00',
                leave_time_interval: null,
                pay_code: null,
                is_close: false,
            }
        },
        created() {
            this.order_no = this.$route.params.order_no;
            this.getOrderDetail();
        },
        mounted() {

        },
        beforeDestroy() {
            clearInterval(this.leave_time_interval);
        },
        methods: {
            handleTab(datum) {
                // console.log(datum)
            },
            toOrderList() {
                window.location.href = "/order-list";
            },
            getOrderDetail() {
                let that = this;
                this.api.getOrderDetail(this.order_no).then(res => {
                    if (res.data) {

                        if (res.data.order.status == 10) {
                            that.is_close = true;
                            that.leave_time_text = '订单已关闭';
                            return;
                        }

                        that.orderDetail = res.data.order;
                        that.leave_time = res.data.leave_time;

                        // qr.toDataURL(that.globalData.HOTS + '/pay/' + res.data.order.order_no).then(url => {
                        //     that.pay_code = url;
                        // });

                        if (res.data.order.status != 10 && that.leave_time > 0) {
                            this.countdown();
                        }

                    }
                })
            },
            countdown() {
                this.leave_time_interval = setInterval(this.setcountdowntext,1000);
            },
            setcountdowntext() {
                if (this.leave_time <= 0) {
                    clearInterval(this.leave_time_interval);
                    return;
                }
                this.leave_time -= 1;
                let h = Math.floor(this.leave_time / 3600);
                let m = Math.floor((this.leave_time / 60 % 60));
                let s = Math.floor((this.leave_time % 60));
                if (h < 10) {
                    h = '0' + h;
                }
                if (m < 10) {
                    m = '0' + m;
                }
                if (s < 10) {
                    s = '0' + s;
                }
                this.leave_time_text = h + ':' + m + ':' + s;
            },
        },
    }
</script>
<style>


</style>
